<template>
  <div>
    <div>
      <!-- <div
        style="height: 15vw; position: fixed; width: 15vw; background: #102438"
      ></div> -->
      <LeftLayout
        :tabs="tabs"
        @changeTab="
          (cur) => {
            active = cur
          }
        "
        style="background: #102438; color: white"
      >
        <div
          style="cursor: pointer"
          :key="index"
          v-for="(tab, index) in tabs"
          :style="index === active ? 'background:rgba(255,255,255,0.2);font-weight:bold;' : ''"
        >
          {{ tab.name }}
        </div>
        <div style="cursor: pointer" @click="logout">退出</div>
      </LeftLayout>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import LeftLayout from '@/components/LeftLayout'

export default {
  name: 'Main',
  components: { LeftLayout },
  data() {
    return {
      active: 0,
      tabs: [
        // { name: "座位管理", url: "/admin/seat/number" },
        { name: '公告管理', url: '/admin/announce' },
        { name: '活动管理', url: '/admin/activity' },
        { name: '图书馆管理', url: '/admin/library' },
        { name: '楼层管理', url: '/admin/floor' },
        { name: '阅览室管理', url: '/admin/readingRoom' },
        { name: '研讨室管理', url: '/admin/seminarRoom' },
        { name: '用户管理', url: '/admin/user' },
        // { name: '老师管理', url: '/admin/teacher' },
        { name: '角色管理', url: '/admin/role' },
        { name: '预约管理', url: '/admin/booking' },
        // { name: '统计分析', url: '/admin/statistics' },
      ],
    }
  },
  methods: {
    logout() {
      sessionStorage.clear()
      this.$router.replace('/login')
    },
  },
}
</script>

<style scoped></style>
